<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/base_bai/base.css">
    <title>我的</title>

    <style>

    html, body{font-size: 100%;background: #F5F5F5}

    .c_1{width: 100%;  height: 10rem;  background: #FF9900;padding: 2rem 0rem}

    .c_2{    position: absolute;  top: 12rem;}
    .my_order,.my_red_pack,.take_job,.red_envelope{margin: 1rem .5rem;  background: white;  border-radius: .5rem;}

    .my_order>.order_t,.my_red_pack>.red_pack_t,.take_job>.take_job_t{    padding: 1rem 1rem 0;}

    .my_order>.order_t>span:nth-child(2),.my_red_pack>.red_pack_t>span:nth-child(2){float:right;color: #979899;}

    .van-grid-item__text{font-size: 0.9rem}


    .red_pack_c{display: flex;align-items: center;}

    .red_pack_c>div{padding: 1rem 0;flex:1;text-align: center;line-height: 1.5rem;font-size: 0.8rem;    color: #333333}

    .red_pack_c>div>span{color:#FF9900;font-weight: 700;  }

    .red_pack_c button{border: 1px solid #FF9900;  height: 1.6rem;  line-height: 1.5rem;border-radius: 2rem;  padding: 0 .8rem;color:#FF9900}

    .take_job>.take_job_c{padding: .5rem 1rem;}
    .take_job img{width: 100%}

    .rebuild{text-align: center;}
    .rebuild>button{width: 90%;background: #FF9800;color:white;border-radius: 2rem}

    .red_envelope>.red_envelope_c{display: flex}
    .red_envelope>.red_envelope_c>div{flex:1;    display: flex;  padding: 1rem;    align-items: center;}
    .red_envelope img{width: 100%; vertical-align: middle;}
    .red_envelope>.red_envelope_c span{font-size: 0.9rem;line-height: 1.5rem;}
    .red_envelope>.red_envelope_c [price]  {    color: #FF4122;font-weight: 700;}


    .c_1>div{display:flex;padding: 1rem;align-items: center;}
    .c_1>div>div{flex:1;color: white}
    .c_1>[user_info] [phone]{font-size: 1.18125rem;margin-bottom: .5rem}
    .c_1>[user_info]>div:nth-child(2){text-align: right;}
    .c_1 [wx_auto]>button{font-size: 0.8rem;    background: #ffead1;  color: #FF9900;  line-height: 1.5rem;  padding: 0 1rem;  border-radius: 1rem;margin-right: 0.5rem;}
    .c_1 [wx_auto]>span{font-size: 0.7rem}
    .c_1 [user_avter]>span{border-radius: 100%;  border: 6px solid #FFCF88;}
    .c_1 [user_avter] img{width:3rem;width: 3rem;  border-radius: 100%;  display: block;height: 3rem}

    .c_1 [user_list]>div{text-align: center;}
    .c_1 [user_list]>div>div:nth-child(1){font-size: 1.18rem}
    .c_1 [user_list]>div>div:nth-child(2){font-size: 0.7rem}
    </style>

</head>

<body>
    <div id="app" v-cloak>

      <div class="c_1">
        <div user_info>
          <div user_name style="flex:2">
            <div phone>Hi 150****1032</div>
            <div   wx_auto><button>一键授权微信</button><span >授权后查看推荐码</span></div>
          </div>
          <div user_avter><span><img src="../../image/center_index_81.png"  /></span></div>
        </div>
        <div user_list>
          <div >
              <div>0</div>
              <div>推荐好友</div>
          </div>
          <div>
              <div>0</div>
              <div>发布视频</div>
          </div>
          <div>
              <div>0</div>
              <div>观看视频</div>
          </div>
          <div>
              <div>0</div>
              <div>已抢红包</div>
          </div>
        </div>
      </div>
      <div class="c_2">
        <div class="red_envelope">
            <div class="red_envelope_c">
              <div>
                <span style="width: 40%"><img src="../../image/center_index_7.png" /></span>
                <span style="text-align: center;">
                  <span >可领取红包</span>
                  <span price>¥ 5000.00</span>
                </span>
              </div>
              <div>
                  <span style="width: 40%"><img src="../../image/center_index_7.png" /></span>
                  <span style="text-align: center;">
                    <span >可领取红包</span>
                    <span price>¥ 5000.00</span>
                  </span>
              </div>

            </div>
          </div>
        <div class="my_order">
              <div class="order_t"><span>我的订单</span><span  @click="openWin('order_list','order_list',{})">查看全部订单</span></div>
              <van-grid :column-num="4">
                  <van-grid-item v-for="(value,index) in grid" :key="value" :icon="value.icon" :text="value.text"  @click="openWin('order_list','order_list',{})"></van-grid-item>
              </van-grid>
        </div>
        <div class="my_red_pack">
              <div class="red_pack_t"><span>我的红包账单</span><span >查看全部记录</span></div>
              <div class="red_pack_c">
                <div>共领取红包金额<br/><span>0元</span></div>
                <div>已提现红包金额<br/><span>0元</span></div>
                <div><button>立即提现</button></div>
              </div>
        </div>
        <div class="take_job">
            <div class="take_job_t"><span>招募令</span></div>
            <div class="take_job_c"  @click="openWin('order_list','order_list',{})">
              <img src="../../image/center_index_5.png"/>
            </div>
        </div>
        <div class="rebuild">
          <van-button  @click='openWin("login_b", "../login/login_b")'>注销登录</van-button>
        </div>
      </div>
<!--
        <div>
            <van-nav-bar class="m-header" title="视频" />
        </div> -->

        <!-- <div class="lunbo">

            <van-swipe :autoplay="300000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img :src="image" @click='  openWin("index_2", "index_2");' />
                </van-swipe-item>
            </van-swipe>
        </div>

        <div>
            <div><img style="width:100%;    display: block;" src="../../image/video_2.png" /></div>
            <van-grid :column-num="4">
                <van-grid-item v-for="(value,index) in grid" :key="value" :icon="value.icon" :text="value.text"></van-grid-item>
            </van-grid>
        </div> -->



    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/base_bai/vue.js"></script>
<script src="../../script/base_bai/vant.js"></script>
<script src="../../script/base_bai/base.js"></script>
<script src="../../script/base_bai/temp.js"></script>
<script>
    apiready = function() {

        Vue.prototype.$ac = api;
        initVue()

    };
    if (BrowserType() == 'pc') {
        initVue()
    }


    function initVue() {
        new Vue({
            el: '#app',
          data: temp.center.index,


        })
    }
</script>

</html>
